<template>
  <!-- 投资年度计划进度虚线图 -->
  <div class="investProgressChartPage">
    <div class="chartBox" :id="`progress-${idName}-chart`"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import echarts from "@/common/utils/echarts.js";

const props = defineProps({
  idName: {
    type: String,
    required: true, //必传属性
  },
});

// 最大值
const maxNum = ref(100);

const options = reactive({
  xAxis: {
    max: maxNum.value,
    splitLine: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  grid: {
    left: 0,
    top: -25,
    right: 50,
    bottom: 20,
  },
  yAxis: [
    {
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: [],
    },
  ],
  series: [
    {
      // 背景样式
      name: "背景",
      type: "pictorialBar",
      barWidth: 4,
      stack: "总量",
      barGap: "-110%",
      symbol: "fixed",
      symbolRepeat: "repeat",
      legendHoverLink: false,
      itemStyle: {
        color: "#242A37",
      },
      data: [],
      symbolSize: [5, 15],
      symbolMargin: 3,
      animation: true, //关闭动画
      z: 0,
    },
    {
      // 主色样式
      name: "info",
      type: "pictorialBar",
      barWidth: 4,
      legendHoverLink: false,
      silent: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          // 右、下、左、上
          { offset: 1, color: "#1977E5" },
          { offset: 0, color: "#00D5FF" },
        ]),
      },
      symbolRepeat: "fixed",
      symbolMargin: 3,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [5, 15],
      symbolPosition: "start",
      symbolOffset: [0, 0],
      data: [0],
      z: 1,
    },
  ],
});

const investProgressChartRef = ref(null);
// 在父组件中调用
const initPlaneDashLineChart = (getPerVal) => {
  // 判断实例是否存在, 如果存在先销毁实例再创建
  if(investProgressChartRef.value){
    investProgressChartRef.value.dispose()
    investProgressChartRef.value = null
  }
  // 当前进度值
  let xDataArr = getPerVal ? [getPerVal] : [0];
  if (!investProgressChartRef.value) {
    investProgressChartRef.value = echarts.init(
      document.getElementById(`progress-${props.idName}-chart`)
    );
    // 背景图数据
    const bgData = [
      {
        value: maxNum.value,
        label: {
          position: [(xDataArr[0]>100 ? '95%' : `${xDataArr[0]}%`), "50%"],
          fontSize: 18,
          offset: [0, 14],
          textShadowColor: "#0091FF",
          textShadowBlur: 10,
          show: true,
          color: "#00D5FF",
          formatter: (params) => {
            return `${getPerVal}%`;
          },
        },
      },
    ];
    options.series[0].data = bgData;
    options.series[1].data = xDataArr;
    investProgressChartRef.value.setOption(options);
  }
  return investProgressChartRef.value
};
defineExpose({
  initPlaneDashLineChart,
});
</script>

<style lang="scss" scoped>
.investProgressChartPage {
  width: 100%;
  height: 100%;
  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
